<template>
    <div>
        <h2 class="area">风险地区</h2>
        <div class="content">
            <template v-if="high.length>0">
                <div class="title">高风险区{{high.length}}个</div>

                <ul>
                    <li v-for="(item,index) in high" :key="index">{{item}}</li>
                </ul>
            </template>
            <template v-if="mid.length>0">
                <div class="title" style="color: yellowgreen;">中风险区{{mid.length}}个</div>

                <ul>
                    <li v-for="(item,index) in high" :key="index">{{item}}</li>
                </ul>
            </template>
        </div>
    </div>
</template>

<script>
    import api from '../../api/index'
    export default {
        name: "Area",
        data() {
            return {
                high: [],
                mid: [],
            }
        },
        async created() {
            const res = await api.getCovInfo();
            if(res.data.code === 200) {
                let riskarea = res.data.newslist[0].riskarea;

                this.high = riskarea.high;
                this.mid = riskarea.mid;

            }else {
                console.log('接口错误')
            }
        }
    }
</script>

<style scoped lang="less">
    .area {
        font-size: 15px;
        font-weight: bold;
        padding: 0.2rem;
    }
    .content {
        .title {
            // margin-top: 0.2rem;
            margin-bottom: 0.2rem;
            color: red;
            padding: 0.2rem;
        }
        li{
            text-indent: 2em;
            line-height: 0.5rem;
            background-color: #fff;
            width: 80%;
            margin: 0 auto;
            box-shadow: 0 0 3px 2px rgba(0,0,0,0.2);
            margin-bottom: 0.1rem;
        }
    }
</style>
